<!--
* @description 第三方应用容器iframe
* @author zywu
* @date 2021/09/29 16:15:51
!-->
<template>
  <div class="app-iframer">
    <div class="app-btn app-hyc" @click="handleShow(1)">
      <img src="../../assets/images/iframe/hyc-hover.png" />
    </div>
    <div class="app-btn app-shx" @click="handleShow(2)">
      <img src="../../assets/images/iframe/shx-hover.png" />
    </div>
    <iframe v-if="src" class="app-iframe" :src="src" frameborder="0"></iframe>
    <div v-if="showType==1" class="back-btn back-hyc" @click="handleClose">
      <img src="../../assets/images/iframe/back-zhxf.png" />
    </div>
    <div v-if="showType==2" class="back-btn back-shx" @click="handleClose">
      <img src="../../assets/images/iframe/back-zhxf.png" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Iframer',
  components: {},

  data() {
    return {
      src: '',
      showType: '',
    }
  },

  computed: {},

  created() {},

  mounted() {},

  methods: {
    handleShow(type) {
      this.src = KSHQ_IFRAME_URL[type - 1]
      if (this.src) {
        this.showType = type
        let ctn = document.querySelector('.home-container')
        ctn && ctn.classList.add('lower-zindex')
      } else {
        this.$Ctl.message('暂未开放！', 'warning')
      }
    },
    handleClose() {
      this.showType = ''
      this.src = ''
      let ctn = document.querySelector('.home-container')
      ctn && ctn.classList.remove('lower-zindex')
    },
  },
}
</script>
<style lang='scss'>
.app-iframer {
  .app-btn {
    margin: 15px auto 0;
    position: relative;
    width: 137px;
    height: 52px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    img {
      display: none;
      position: absolute;
      left: -26px;
    }
    &.app-hyc {
      img {
        top: -47px;
      }
    }
    &.app-shx {
      img {
        bottom: -47px;
      }
    }
    &:hover {
      img {
        display: inline-block;
      }
    }
  }
  .app-hyc {
    background-image: url(../../assets/images/iframe/hyc.png);
    &:hover {
      background-image: url(../../assets/images/iframe/hyc-active.png);
    }
  }
  .app-shx {
    background-image: url(../../assets/images/iframe/shx.png);
    &:hover {
      background-image: url(../../assets/images/iframe/shx-active.png);
    }
  }
  .app-iframe {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
  .back-btn {
    position: fixed;
    z-index: 10001;
    cursor: pointer;
    img {
      display: none;
      position: absolute;
      left: -28px;
      bottom: -47px;
    }
    &:hover {
      img {
        display: inline-block;
      }
    }
  }
  .back-hyc {
    width: 135px;
    height: 48px;
    top: 10px;
    right: 58px;
    background-image: url(../../assets/images/iframe/zhxf.png);
    &:hover {
      background-image: url(../../assets/images/iframe/zhxf-active.png);
    }
  }
  .back-shx {
    width: 136px;
    height: 61px;
    top: 26px;
    right: 56px;
    background-image: url(../../assets/images/iframe/zhxf1.png);
    &:hover {
      background-image: url(../../assets/images/iframe/zhxf1-active.png);
    }
  }

  @media screen and (min-width: 1920px) {
    .app-iframe {
      top: 0;
      left: 50%;
      margin-left: -960px;
      width: 1920px;
      height: 1084px;
    }
    .back-hyc {
      right: calc(50vw - 902px);
    }
    .back-shx {
      right: calc(50vw - 904px);
    }
  }
}
</style>